在vue2.x中npm引入swiper的使用方法 |
您所在的位置：网站首页 › npm install 无法下载 › 在vue2.x中npm引入swiper的使用方法 |
在vue2.x中npm引入swiper的使用方法
|
关于vue使用swiper方法
第一种方法：通过vue，利用大佬的插件，简单的使用swiper操作 第二种方法：通过以前的三件套引入方法使用 下面我会一一说到。 效果先览
那就使用大佬的vue-awesome-swiper来解决问题 下方是文档连接
vue-awesome-swiper
采用一一对应的原则
引入最新版：npm install [email protected] --save 下图是上述网站Github得使用方法
我们尽量安装版本号限制在5版本：npm install [email protected] --save 因为我测试了一次较高版本出现了错误 引入 全局、局部 都可 import { Swiper, SwiperSlide } from 'vue-awesome-swiper'; import 'swiper/css/swiper.css';在vue文件中用法： 在结构上 Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6在引用，方法处理上 import { Swiper, SwiperSlide } from 'vue-awesome-swiper'; import 'swiper/css/swiper.css'; export default { name: 'Home', data(){ return{ swiperOption: { slidesPerView: 3, spaceBetween: 30, pagination: { el: '.swiper-pagination', clickable: true } } } }, components: { Swiper, SwiperSlide, }, methods:{ onSlideChange(){ console.log('111'); } }, }我写了点css样式 .home{ .swiper{ height: 300px; .swiper-slide{ background-color: rebeccapurple; } } }如果想使用点击就可切换swiper的图片 this.$refs.mySwiper.$swiper.slideTo(currentIndex) 方法二在vue文件下终端中引入：npm install swiper 引入文件 import Swiper from 'swiper'; import 'swiper/swiper-bundle.css'; import 'swiper/swiper-bundle.js';写method的方法 _initSwiper(){ var swiper = new Swiper(".swiper-container", { spaceBetween: 60, pagination: { el: ".swiper-pagination", clickable: true, }, }); },在mounted中应用 mounted() { this._initSwiper(); }, |
【本文地址】